<template>
  <view class="history-interview-page">
    <!-- 顶部导航（返回 + 标题） -->
    <view class="top-bar">
      <view class="back-btn" @click="navigateBack">
        <image 
          class="back-icon" 
          src="/static/icons/left.png" 
          mode="widthFix"
        ></image>
      </view>
      <text class="page-title">历史记录</text>
    </view>

    <!-- 筛选下拉框 -->
    <view class="filter-section">
      <picker 
        mode="selector" 
        :range="filterOptions" 
        @change="onFilterChange"
      >
        <view class="filter-box">
          <text class="filter-text">{{ currentFilter }}</text>
          <image 
            class="arrow-icon" 
            src="/static/icons/arrow.png" 
            mode="widthFix"
          ></image>
        </view>
      </picker>
    </view>

    <!-- 面试列表 -->
    <view class="interview-list">
      <block v-for="(item, index) in filteredList" :key="index">
        <view class="interview-item">
          <!-- 公司Logo -->
          <image 
            class="company-logo" 
            :src="item.logo" 
            mode="aspectFill"
          ></image>
          <!-- 内容区 -->
          <view class="item-content">
            <view class="item-top">
              <text class="company-name">{{ item.company }}</text>
              <text class="status" :class="statusClass(item.status)">{{ item.status }}</text>
            </view>
            <text class="address">{{ item.address }} {{ item.date }}</text>
          </view>
        </view>
      </block>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 筛选选项
      filterOptions: ["全部", "已超时", "已接受", "已拒绝"],
      currentFilter: "全部",
      // 历史面试数据
      interviewData: [
        {
          id: 1,
          logo: "/static/logos/chuanyi.png",
          company: "传一信息科技有限公司",
          status: "已超时",
          address: "厦门市传一信息科技...",
          date: "2025.08.08"
        },
        {
          id: 2,
          logo: "/static/logos/chuanyi.png",
          company: "传一信息科技有限公司",
          status: "已接受",
          address: "厦门市传一信息科技...",
          date: "2025.08.08"
        },
        {
          id: 3,
          logo: "/static/logos/chuanyi.png",
          company: "传一信息科技有限公司",
          status: "已拒绝",
          address: "厦门市传一信息科技...",
          date: "2025.08.08"
        }
      ]
    };
  },
  computed: {
    // 筛选后的列表
    filteredList() {
      if (this.currentFilter === "全部") {
        return this.interviewData;
      }
      return this.interviewData.filter(
        (item) => item.status === this.currentFilter
      );
    }
  },
  methods: {
    // 返回上一页
    navigateBack() {
      uni.navigateBack();
    },
    // 筛选改变
    onFilterChange(e) {
      const index = e.detail.value;
      this.currentFilter = this.filterOptions[index];
    },
    // 状态样式映射
    statusClass(status) {
      switch (status) {
        case "已超时":
          return "overtime";
        case "已接受":
          return "accepted";
        case "已拒绝":
          return "rejected";
        default:
          return "";
      }
    }
  }
};
</script>

<style scoped>
/* 页面容器 */
.history-interview-page {
  background-color: #fff;
  min-height: 100vh;
}

/* 顶部导航 */
.top-bar {
  display: flex;
  align-items: center;
  height: 44px;
  padding: 0 15px;
  border-bottom: 1px solid #eee;
}
.back-btn {
  width: 44px;
  height: 44px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.back-icon {
  width: 16px;
  height: 16px;
}
.page-title {
  font-size: 17px;
  font-weight: bold;
  color: #333;
  flex: 1;
  text-align: center;
  margin: 0 44px;
}

/* 筛选区域 */
.filter-section {
  padding: 15px;
}
.filter-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid #eee;
  border-radius: 4px;
  padding: 6px 10px;
  width: 100px;
}
.filter-text {
  font-size: 14px;
  color: #333;
}
.arrow-icon {
  width: 14px;
  height: 14px;
  margin-left: 6px;
}

/* 面试列表 */
.interview-list {
  padding: 0 15px;
}
.interview-item {
  display: flex;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid #eee;
}
.company-logo {
  width: 48px;
  height: 48px;
  border-radius: 4px;
  margin-right: 10px;
}
.item-content {
  flex: 1;
}
.item-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 4px;
}
.company-name {
  font-size: 16px;
  font-weight: bold;
  color: #333;
}
.status {
  font-size: 14px;
}
.overtime {
  color: #999; /* 已超时-灰色 */
}
.accepted {
  color: #0f0; /* 已接受-绿色 */
}
.rejected {
  color: #f00; /* 已拒绝-红色 */
}
.address {
  font-size: 14px;
  color: #999;
}
</style>